<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>票据管理系统</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        .star::before {
            content: '*';
            color: #F56C6C;
            margin-right: 0.020833rem;
        }

        .am-selected {
            width: 100%
        }

        .am-selected-status {
            background-color: #7a1414;
            font-size: 7px;
            color: rgba(32, 133, 17, 0.99);
        }
    </style>
</head>

<body data-type="generalComponents">
<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img
                        src="assets/img/user01.png"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="login.html"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>

<div class="tpl-page-container tpl-page-header-fixed">
    <div class="tpl-left-nav tpl-left-nav-hover">
        <div class="tpl-left-nav-list">
            <ul class="tpl-left-nav-menu">
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list active">
                        <i class="am-icon-table"></i>
                        <span>凭证管理</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu" style="display:block">
                        <li>
                            <a href="transfer-list.html">
                                <i class="am-icon-angle-right"></i>
                                <span>转让列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-wpforms"></i>
                        <span>我的凭证</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu">
                        <li>
                            <a href="my-ticket-list.html">
                                <i class="am-icon-angle-right"></i>
                                <span>我的凭证列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            凭证转让
        </div>
        <ol class="am-breadcrumb">
            <li class="am-active"><a style="color: #999999;">凭证管理</a></li>
            <li class="am-active">凭证转让</li>
        </ol>
        <!-- 基本信息 -->
        <div class="tpl-portlet-components" id="baseinfoDiv">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    凭证基本信息
                </div>
                <div class="tpl-portlet-input tpl-fz-ml">
                    <div class="portlet-input input-small input-inline">
                        <div class="input-icon right">
                        </div>
                    </div>
                </div>
            </div>
            <div class="tpl-block ">
                <div class="am-g tpl-amazeui-form">

                    <div id="inf">

                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="otherEnterprise"
                                           class="am-u-sm-3 am-form-label">开单企业</label>
                                    <div id="otherEnterprise" class="am-u-sm-9"
                                         style="margin-top: 4px;font-size: 16px;">
                                        {{message.enterprise}}
                                    </div>
                                </div>
                            </form>
                        </div>


                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="otherCreditCode"
                                           class="am-u-sm-3 am-form-label">统一社会信用代码</label>
                                    <div id="otherCreditCode" class="am-u-sm-9"
                                         style="margin-top: 4px;font-size: 16px;">
                                        {{message.socialUniformCode}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="bank" class="am-u-sm-3 am-form-label">金融机构</label>
                                    <div id="bank" class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{message.institution}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="payAmount" class="am-u-sm-3 am-form-label">凭证金额</label>
                                    <div id="payAmount" class="am-u-sm-9"
                                         style="font-size: 19px;color: red;font-weight: 500;">
                                        {{message.amountMoney|numFilter}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="openTime" class="am-u-sm-3 am-form-label">开单日期</label>
                                    <div id="openTime" class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{message.openTime|formatDate}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="expiryTime" class="am-u-sm-3 am-form-label">到期日期</label>
                                    <div id="expiryTime" class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{message.expiryTime|formatDate}}
                                        <span style="font-size: 12px;color: #999">剩余{{balanceTime}}天</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="paymentInterestType" class="am-u-sm-3 am-form-label">付息方式</label>
                                    <div id="paymentInterestType" class="am-u-sm-9"
                                         style="margin-top: 4px;font-size: 16px;">
                                        {{message.paymentInterestType}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <label for="addition" class="am-u-sm-3 am-form-label">备注</label>
                                    <div id="addition" class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                        {{message.remark}}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tpl-portlet-components">

            <!-- 表单填写页面 -->
            <div id="input">
                <div class="tpl-block" id="showDiv">
                    <div class="">
                        <div class="portlet-title">
                            <div class="caption font-green bold">
                                转单信息
                            </div>
                            <div class="tpl-portlet-input tpl-fz-ml">
                                <div class="portlet-input input-small input-inline">
                                    <div class="input-icon right">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tpl-block ">
                            <div class="am-g tpl-amazeui-form">
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="myEnterprise" class="am-u-sm-3 am-form-label star">
                                                转单企业</label>
                                            <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                                <input disabled type="text" :value="inputMessage.enterprise"
                                                       id="myEnterprise"
                                                >
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="myCreditCode"
                                                   class="am-u-sm-3 am-form-label">统一社会信用代码</label>
                                            <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                                <input disabled :value="inputMessage.socialUniformCode" type="text"
                                                       id="myCreditCode"
                                                       placeholder="请输入统一社会信用代码">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="payEnterprise" class="am-u-sm-3 am-form-label star">
                                                收单企业</label>
                                            <div class="am-u-sm-9" id="payEnterprise"
                                                 style="margin-top: 4px;font-size: 16px;">

                                                <select @change="downSelect" v-model="selectEnterprise">
                                                    <option value="" selected disabled style="display: none;">
                                                        请选择收单企业
                                                    </option>
                                                    <option v-for="(otherEnterprisesName,index) in enterpriseName"
                                                            :value="otherEnterprisesName.name">
                                                        {{otherEnterprisesName.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="payCreditCode"
                                                   class="am-u-sm-3 am-form-label">统一社会信用代码</label>
                                            <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                                <input disabled type="text" id="payCreditCode"
                                                       :value="inputMessage.otherSocialUniformCode"
                                                       placeholder="请输入统一社会信用代码">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="payMoney" class="am-u-sm-3 am-form-label star"> 转让金额</label>
                                            <div class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                                <input type="text" id="payMoney" v-model="inputMessage.amountMoney"
                                                       placeholder="请输入凭证金额">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="remark" class="am-u-sm-3 am-form-label">备注</label>
                                            <div id="remark" class="am-u-sm-9" style="margin-top: 4px;font-size: 16px;">
                                                <textarea class="" rows="4" id="user-intro"
                                                          v-model="inputMessage.remark"
                                                          placeholder="请输入备注">{{inputMessage.remark}}</textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6">
                                </div>
                            </div>
                            <div style="text-align: center;margin-top:40px">
                                <a class="am-btn am-btn-default"
                                   href="my-ticket-list.html">取&nbsp;&nbsp;&nbsp;&nbsp;消</a>
                                <a id="submitBtn" class="am-btn am-btn-primary"
                                   style="margin-left:20px">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 提交成功页面 -->
                <div class="tpl-block" id="resultDiv" hidden>
                    <div class="am-g tpl-amazeui-form">
                        <div class="am-u-sm-12 am-u-md-12">
                            <form class="am-form am-form-horizontal">
                                <div class="am-form-group">
                                    <div class="am-u-sm-12"
                                         style="margin-top: 4px;text-align: center;margin-bottom: 20px;">
                                        <img src="assets/img/u105.png" alt="" style="width: 120px;">
                                    </div>
                                    <div class="am-u-sm-12"
                                         style="margin-top: 4px;font-size: 20px;text-align: center;font-weight: bold;margin-bottom: 20px;">
                                        提交申请成功
                                    </div>
                                    <div class="am-u-sm-12" style="color: #999;font-size:14px;text-align: center;">
                                        已通知审核人员尽快审核，最终结果将以站内信的方式告知您。
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top:40px">
                        <a class="am-btn am-btn-primary" href="my-ticket-list.html">返回列表</a>
                        <!--                        -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>

<script>
    // 提交按钮

    const transferInformation = new Vue({
        el: "#inf",
        data: {
            message: {},
            balanceTime: "",
        },
        methods: {},
        created() {
            let _this = this;
            let start = location.href.lastIndexOf("=");
            let id = location.href.substring(start + 1);
            let enterpriseId = JSON.parse(window.sessionStorage.getItem("loginEnterpriseId"));
            console.log("enterprise:" + enterpriseId);
            if (enterpriseId === null) {
                location.href = "login.html";
            }
            axios.get("admin/getVoucherId.tra?enterpriseId=" + enterpriseId).then(function (response) {
                _this.voucherId = response.data.value
                let flag = false;
                for (let arr in _this.voucherId) {
                    let arrId = _this.voucherId[arr] + '';
                    console.log("bbb:" + arrId)
                    if (id === arrId) {
                        flag = true;
                        break;
                    } else {
                        flag = false;
                    }
                    console.log(flag)
                }
                if (flag === false) {
                    location.href = "my-ticket-list.html";
                }
                axios.get("admin/getTransferMessage.tra?id=" + id).then(
                    function (res) {
                        _this.message = res.data.value;
                        // console.log("到期时间戳" + _this.message.expiryTime);
                        axios.get("admin/getRemainTime.tra?expiryTime=" + _this.message.expiryTime).then(
                            function (response) {
                                _this.balanceTime = response.data.value;
                            })
                    });
            })
        },
        filters: {
            //处理时间，将传过来变成的时间戳(还不是时间戳，是时间戳减后六位)转化为正常时间格式
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            },
            //处理数字的小数点位数，将传过来的金额数字设置成两位小数
            numFilter: function (value) {
                return parseFloat(value).toFixed(2);
            },
        },
    });
    const transferInput = new Vue({
        el: "#input",
        data: {
            inputMessage: {
                enterprise: "",
                amountMoney: "",
                remark: "",
                socialUniformCode: "",
                select: "",
                otherSocialUniformCode: "",
            },
            selectEnterprise: "",
            enterpriseName: {},
            selected: true,//默认的字体样式
        },
        methods: {
            downSelect() {
                let _this = this;
                // console.log(this.selectEnterprise);
                axios.get("admin/getSocialUniformCodeFromName.tra?name=" + this.selectEnterprise).then(function (res) {
                    let data = res.data;
                    _this.inputMessage.otherSocialUniformCode = data.value;
                    // console.log(_this.inputMessage.otherSocialUniformCode)
                })
            },
        },
        created() {
            let _this = this
            let start = location.href.lastIndexOf("=");
            let id = location.href.substring(start + 1);
            let parse = JSON.parse(window.sessionStorage.getItem("loginEnterpriseId"));
            // console.log("传过来的企业id" + parse);
            axios.get("admin/getSelect.tra?id=" + id)
                .then(function (res) {
                    let data = res.data;
                    _this.enterpriseName = data.value;
                    // console.log(data)
                    // console.log(data.value)
                });
            axios.get("admin/getMyEnterprise.tra?id=" + id)
                .then(function (res) {
                    let data = res.data;
                    // console.log(data);
                    _this.inputMessage.enterprise = data.value;
                    // console.log(_this.inputMessage.enterprise)
                });
            axios.get("admin/getSocialUniformCode.tra?id=" + id)
                .then(function (res) {
                    let data = res.data;
                    _this.inputMessage.socialUniformCode = data.value;
                });
        },
    });
    $(function () {
        $('#submitBtn').on('click', function () {
            console.log("输入金额" + transferInput.inputMessage.amountMoney);
            console.log("显示金额" + transferInformation.message.amountMoney);
            let start = location.href.lastIndexOf("=");
            let id = location.href.substring(start + 1);

            let formData = new FormData();
            formData.append("id", id);
            formData.append("inputAmount", transferInput.inputMessage.amountMoney);
            formData.append("remark", transferInput.inputMessage.remark);
            formData.append("selectEnterprise", transferInput.selectEnterprise);
            formData.append("showAmount", transferInformation.message.amountMoney);
            // console.log(transferInput.inputMessage.remark)
            let r = confirm("请再次确认填写信息...您确认提交吗？");
            if (r === true) {
                axios({
                    method: "POST",
                    url: "admin/insertTransferMessage.tra",
                    data: formData,
                }).then(function (response) {
                    if (response.data.code === 601) {
                        alert("收单企业不能为空！");
                    } else if (response.data.code === 602) {
                        alert("转让金额不能为空！")
                    } else if (response.data.code === 604) {
                        alert("转让金额不合法！")
                    } else if (response.data.code === 603) {
                        alert("转让金额大于凭证金额，转账失败！")
                    } else {
                        $('#baseinfoDiv').hide();
                        $('#showDiv').hide();
                        $('#resultDiv').show();
                    }
                });
            } else {
            }
        });
    });

</script>
</html>